<template>
  <div>
    <div class="search">
      <a-form :model="formModel">
        <a-row :gutter="20">
          <a-col :span="6" :lg="6" :xs="9" :md="8">
            <a-form-item label="日期">
              <a-range-picker
                v-model:value="data.time"
                style="width: 100%"
                :ranges="data.ranges"
                show-time
                format="YYYY/MM/DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="订单号">
              <a-input placeholder="请输入订单号" v-model:value="formModel.number"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="订单状态">
              <a-select ref="select" v-model:value="formModel.status" placeholder="请选择订单状态">
                <a-select-option v-for="item in orderStatusList" :value="item.status" :key="item.status">{{ item.title }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="所属渠道">
              <a-select ref="select" v-model:value="formModel.channel" placeholder="请选择渠道">
                <a-select-option v-for="item in data.organList" :value="item.name" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 头部 -->
    <div class="global-button">
      <a-button type="primary" @click="search(1)" class="d-a-center">搜索</a-button>
      <a-button type="primary" @click="excleData()" class="d-a-center">开票申请</a-button>
    </div>
    <!-- 列表 -->
    <a-table
      rowKey="number"
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="renderData"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <!-- :scroll="{ y: 540,x:'auto' }" -->
      <template #withdrawalsStatus="{ record }">
        <a-tag v-if="record.withdrawalsStatus" :color="statusColorObj[record.withdrawalsStatus].color">{{
          statusColorObj[record.withdrawalsStatus].text
        }}</a-tag>
      </template>

      <template #status="{ record }">
        <div>{{ orderStatus[record.status] }}</div>
      </template>

      <template #operation="{ record }">
        <a-button type="link" @click="edit(record)">编辑</a-button>
      </template>
    </a-table>

    <InvoiceModal ref="invoiceModalRef" @submit="search(1)" />
    <inputModal @ok="handleOk" ref="inputModalRef" type="input" label="金额" title="修改价格" :number="data.number"></inputModal>
  </div>
</template>
<script setup>
import { reactive, ref, watch, computed, createVNode, toRefs, defineOptions } from 'vue'
import { Modal, notification, message } from 'ant-design-vue'
import { columnsArr, dataObj, statusColorObj, orderStatus, orderStatusList } from './data'
import InvoiceModal from '../components/InvoiceModal.vue'
import inputModal from '@/components/common/inputModal.vue'
import { useTable, useModal, useSelects } from '@/hooks'
import { selectInstitutionTypeList } from '@/api/setting/index'
import { selectAllOrder, selectAllOrderNumber, updatePriceByNumber } from '@/api/buisness/index'

defineOptions({
  name: 'ContentTranslateOrder'
})
// 状态列表

const columns = columnsArr

const data = reactive(dataObj)
// 选择时间
const panelChange = (date, dateString) => {
  formModel.value.startTime = dateString[0]
  formModel.value.endTime = dateString[1]
}

//必须有括号 建议箭头函数 防止深拷贝
const getParams = () => ({})

const { info, renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
  api: selectAllOrder,
  getParams
})

const init = () => {
  selectInstitutionTypeList().then(r => {
    data.organList = r.object
  })
}
init()

const invoiceModalRef = ref()
const inputModalRef = ref()

const { renderData: selectsRenderData, rowSelection } = useSelects({
  key: 'number'
})

const getSelectAllOrderNumber = obj => {
  console.log('数据', obj)
  selectAllOrderNumber(obj).then(res => {
    selectsRenderData.value = res.object
  })
}
const search = num => {
  handleSearch(num)
  getSelectAllOrderNumber(formModel.value)
}
search(1)

// 监听renderData的变化
// watch(
//   renderData,
//   (newVal, oldVal) => {
//     console.log('renderData changed:', newVal)
//     // 这里调用你的函数
//     // yourFunction();
//     let arr = newVal.map(item => {
//       return item.id
//     })
//     rowSelection.changePageId(arr)
//   },
//   {
//     deep: true // 如果需要深度监听数组内部对象的变化，请设置deep为true
//   }
// )

const handleOk = async value => {
  console.log(value)
  let obj = {
    price: value,
    number: Number(data.number)
  }
  let res = await updatePriceByNumber(obj)
  if (res.success) {
    message.success('修改成功~')
    search()
  }
}
const excleData = () => {
  if (rowSelection.selectedRowKeys.length == 0) {
    message.warning('请选择你要开票的订单')
    return
  }
  invoiceModalRef.value.showModal(rowSelection.selectedRowKeys)
}
const edit = record => {
  data.number = record.number
  inputModalRef.value.showModal(record.price)
}
</script>

<style scoped lang="less">
.search {
  // background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
